<template>
  <a-select
    v-model:value="id"
    show-search
    allow-clear
    class="w-full"
    placeholder="请选择词库名称"
    :default-active-first-option="false"
    :show-arrow="false"
    :filter-option="false"
    :field-names="{ label: 'name', value: 'id' }"
    :loading="searching"
    :not-found-content="searching ? '查询中' : '暂无内容'"
    :options="options"
    @search="handleSearch"
    @change="handleChange"
  >
    <template v-if="searching" #notFoundContent>
      <a-spin size="small" />
    </template>
  </a-select>
</template>

<script lang="ts" setup>
import type { WordLib } from '@/services/word-lib/getWordLib'
import { debounce } from 'lodash-es'
import { useVModel } from '@vueuse/core'

interface Props {
  searching: boolean
  options: WordLib[]
  libId?: number
}

interface Emits {
  (e: 'on-change', v: number): void
  (e: 'on-search', v: string): void
}

const emit = defineEmits<Emits>()
const props = withDefaults(defineProps<Props>(), {
  searching: false,
  options: () => []
})
const id = useVModel(props, 'libId')

const handleSearch = debounce((val: string) => {
  emit('on-search', val)
}, 400)

function handleChange(libId: number) {
  emit('on-change', libId)
}
</script>

<script lang="ts">
export default {
  name: 'LibSearcher'
}
</script>
